<template>
    <div class="loginwrap">
        <div class="logo">
            <image
                class="logoImg"
                src="https://img2.baidu.com/it/u=620833131,3260986266&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
                mode="scaleToFill"
            />
        </div>
        <!-- 表单 -->
        <div class="card">
            <div class="row-Input">
                <div class="left-Input">
                    <input-box
                        :value="formData.telephone"
                        :placeholder="'请输入手机号'"
                        :on-input="handleInput"
                        :label="'手机号'"
                        :params-value="'telephone'"
                        :width="100"
                    ></input-box>
                </div>
                <CountdownButton
                    :phone-number="formData.telephone"
                    :edit-text="'注册'"
                ></CountdownButton>
            </div>
            <div class="row-Input">
                <div class="left-Input">
                    <input-box
                        :value="formData.validCode"
                        :placeholder="'请输入验证码'"
                        :on-input="handleInput"
                        :label="'验证码'"
                        :params-value="'validCode'"
                    ></input-box>
                </div>
            </div>
            <div class="row-Input">
                <div class="left-Input">
                    <input-box
                        :value="formData.password"
                        :placeholder="'请输入登录密码'"
                        :on-input="handleInput"
                        :label="'密码'"
                        :params-value="'password'"
                    ></input-box>
                </div>
            </div>
        </div>
        <div class="boxsubmit" @click="handleRegister">注册</div>

        <!-- 第三方协议 -->
        <div class="agree">
            <checkbox-group @change="onChangeCheck">
                <label>
                    <checkbox :value="agreeCheckBox" :checked="agreeCheckBox" />
                </label>
            </checkbox-group>
            <div class="agreeBox">
                我同意<span class="xieText">«用户协议»</span>与<span class="xieText"
                    >«隐私协议»</span
                >
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import InputBox from '@/components/inputBox/index.vue'

import CountdownButton from '@/components/countdownButton/index.vue'
import { registerMember } from '@/service/login'

const agreeCheckBox = ref<Boolean>(false)
interface ITFormData {
    telephone?: string
    validCode?: string
    password?: string
    deviceId?: string
}

const formData = ref<ITFormData | any>({
    telephone: '',
    validCode: '',
    password: '',
    deviceId: ''
})
const handleInput = (e: any, key: string) => {
    const { value } = e.detail
    formData.value[key] = value
}

// 是否 同意
const onChangeCheck = (e: any) => {
    const state: Boolean = e.detail.value[0] ? Boolean(e.detail.value[0]) : false
    agreeCheckBox.value = state
}
// 点击忘记密码
const getDeviceIdInfo = () => {
    uni.getSystemInfo({
        success: (res) => {
            formData.value.deviceId = res.deviceId
        }
    })
}

const __init = () => {
    getDeviceIdInfo()
}
__init()

const handleRegister = async () => {
    const formValue = formData.value
    if (!agreeCheckBox.value) {
        uni.showModal({
            content: '请确认你已阅读并同意《用户协议》和 《隐私政策》',
            showCancel: false,
            success(res) {
                if (res.confirm) {
                    console.log('用户点击确定')
                }
            }
        })
        return false
    }
    if (!formValue.validCode) {
        uni.showToast({
            icon: 'none',
            title: '请输入验证码'
        })
        return false
    }
    if (!formValue.password) {
        uni.showToast({
            icon: 'none',
            title: '请输入密码'
        })
        return false
    }
    const result = await registerMember({
        siteCode: '1721805485310611456',
        confirmPassword: formValue.password,
        ...formValue
    })
    if (result.code === '200') {
        uni.setStorageSync('userInfoId', res.data)
        uni.reLaunch({
            url: '/pages/index/index'
        })
    }
}
</script>
<style scoped lang="scss">
.loginwrap {
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    .logo {
        // width: calc(100% - 40p);
        height: 200px;
        border-radius: 20px;
        .logoImg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }
    }
    .card {
        margin-top: 10px;
        background: #fff;
        padding: 10px 15px 10px 15px;
        width: 100%;
        box-sizing: border-box;
        border-radius: 8px;
        .row-Input {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #f1eeee;

            .leftInput {
                // width: 100px;
                height: 40px;
            }
        }
    }
    .boxsubmit {
        width: 100%;
        height: 38px;
        margin-top: 20px;
        background: rgb(56, 156, 253);
        border-radius: 18px;
        text-align: center;
        color: #fff;
        line-height: 38px;
    }
    .appbox {
        display: flex;
        height: 38px;
        margin-top: 10px;
        font-size: 14px;
        color: rgb(56, 156, 253);
        justify-content: space-between;
    }
    .otherlogin {
    }
    .agree {
        width: 100%;
        justify-content: center;
        display: flex;
        align-items: center;
        margin-top: 10px;
        font-size: 14px;
        .agreeBox {
            color: #ccc;
            .xieText {
                color: rgba(26, 186, 241, 1);
            }
        }
    }
}
</style>
